import { Modal } from 'antd';
import { useState } from 'react';
import { uploadFileManual } from '@/components/Upload'
import styles from './style.less'

const CopyedImageModal = (props) => {

    const {
        file,
        onCancel,
        onInsertImage
    } = props;

    const [src, setSrc] = useState();
    const [loading, setLoading] = useState(false)

    const reader = new FileReader();
    //2:解析对象，转成baae64对象的url
    reader.addEventListener("load", function () {
        setSrc(reader.result);
    }, false);

    if (!file) {
        return <></>
    }
    reader.readAsDataURL(file)

    const onSuccess = (fileUrl) => {
        console.log(fileUrl)
        if (onInsertImage) {
            onInsertImage(fileUrl)
        }
    }

    const onUploadFile = () => {
        uploadFileManual({
            file,
            dir: "clipboard",
            acl: "public-read",
            onSuccess: onSuccess
        })
        return true;
    }
    return (<Modal
        title={"插入图片"}
        closable
        width="60%"
        onCancel={onCancel}
        onOk={onUploadFile}
        visible={!!file}>
        <div className={styles.copyedImgModal}>
            <img className={styles.copyedImg} src={src}></img>
        </div>
    </Modal>)
}

export default CopyedImageModal;